<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>主题</span>
        <el-tooltip v-if="btnShow.edit" content="新增" placement="top">
          <el-button icon="Plus" @click="handleAddArea"></el-button>
        </el-tooltip>
      </div>
    </template>
    <el-table
      ref="areaTableRef"
      v-loading="areaLoading"
      :data="areaList"
      :show-header="false"
      highlight-current-row
      fit
      @current-change="handleChangeArea"
    >
      <el-table-column :show-overflow-tooltip="true">
        <template #default="scope">
          <div class="area-item">
            <span>{{ scope.row.name }}&nbsp;&nbsp;<el-tag size="small" type="info">{{ scope.row.code }}</el-tag></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="76" class-name="ope-column">
        <template #default="scope">
          <el-button-group v-if="btnShow.edit" size="small">
            <el-tooltip content="修改" placement="top">
              <el-button icon="Edit" @click="handleEditArea(scope.row)"/>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button icon="Delete" @click="handleDeleteArea(scope.row)"/>
            </el-tooltip>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="areaFormTitle" v-model="areaFormOpen" width="350px" append-to-body>
      <el-form :model="areaForm" :rules="areaRules" ref="areaFormRef" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="主题名称" prop="name">
              <el-input v-model="areaForm.name" placeholder="请输入用户昵称" maxlength="30"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主题编码" prop="code">
              <el-input v-model="areaForm.code" :disabled="areaCodeDisabled" placeholder="请输入用户昵称" maxlength="30"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="访问级别" prop="vipLevel">
              <el-select v-model="areaForm.vipLevel" placeholder="请选择">
                <el-option v-for="dict in sys_user_vip" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmitArea">确 定</el-button>
          <el-button @click="handleCancelArea">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';
import { listArea, addArea, updateArea, delArea } from '@/api/module/area';

export default defineComponent({
  props: ['pageType', 'btnShow'],
  components: {},
  setup(props, ctx) {
    const { proxy } = getCurrentInstance();
    const { pageType, btnShow } = toRefs(props);
    const { sys_user_vip } = proxy.useDict('sys_user_vip');
    const vueData = reactive({
      areaLoading: false,
      areaList: [],
      checkedKeys: [],
      areaForm: {
        uid: '',
        name: '',
        code: '',
        vipLevel: '0',
      },
      areaRules: {
        code: [
          { required: true, message: '主题编码不能为空', trigger: 'blur' },
          { min: 3, max: 20, message: '主题编码长度必须介于 3 和 20 之间', trigger: 'blur' },
          { pattern: /^\w{3,20}$/, message: '只能输入字母和数字' },
        ],
        name: [{ required: true, message: '主题名称不能为空', trigger: 'blur' }],
      },
      areaFormTitle: '',
      areaFormOpen: false,
      areaCodeDisabled: false,
      areaParams: {
        name: ''
      }
    });

    const loadAreaList = () => {
      vueData.areaLoading = true;
      listArea(vueData.areaParams).then(res => {
        vueData.areaList = res.data;
        if (vueData.areaList && vueData.areaList.length > 0) {
          proxy.$refs['areaTableRef'].setCurrentRow(vueData.areaList[0]);
        }
        vueData.areaLoading = false;
      });
    };

    const resetArea = () => {
      vueData.areaForm = {
        uid: undefined,
        name: '',
        code: '',
        vipLevel: '0',
      };
    }

    const handleAddArea = () => {
      resetArea();
      vueData.areaCodeDisabled = false;
      vueData.areaFormOpen = true;
      vueData.areaFormTitle = '添加主题';
    };

    const handleDeleteArea = (area) => {
      proxy.$modal.confirm('是否确认删除主题？').then(function () {
        return delArea(area.uid);
      }).then(() => {
        loadAreaList();
        proxy.$modal.msgSuccess('删除成功');
      }).catch(() => {
      });
    };

    const handleEditArea = (area) => {
      vueData.areaForm = {
        uid: area.uid,
        name: area.name,
        code: area.code,
        vipLevel: '' + area.vipLevel,
      };
      vueData.areaCodeDisabled = true;
      vueData.areaFormOpen = true;
      vueData.areaFormTitle = '修改主题';
    };

    const handleChangeArea = (area) => {
      if (area && area.code !== '') {
        ctx.emit('change', area.code);
      }
    }

    const handleSubmitArea = () => {
      proxy.$refs['areaFormRef'].validate(valid => {
        if (valid) {
          if (vueData.areaForm.uid !== undefined) {
            updateArea(vueData.areaForm).then(() => {
              proxy.$modal.msgSuccess('修改成功');
              vueData.areaFormOpen = false;
              loadAreaList();
            });
          } else {
            addArea(vueData.areaForm).then(() => {
              proxy.$modal.msgSuccess('新增成功');
              vueData.areaFormOpen = false;
              loadAreaList();
            });
          }
        }
      });
    }

    const handleCancelArea = () => {
      vueData.areaFormOpen = false;
    }

    return {
      pageType,
      btnShow,
      PageTypeEnum,
      sys_user_vip,
      ...toRefs(vueData),
      loadAreaList,
      handleAddArea,
      handleChangeArea,
      handleEditArea,
      handleDeleteArea,
      handleSubmitArea,
      handleCancelArea,
    };
  },
});
</script>

<style scoped>

</style>